<template>
  <div class="notice-item">
    <div class="center-wrapper">
      <!-- back part -->
      <div class="back-part">
        <div class="back-btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <!-- notice part -->
      <div class="notice-part">
        <div class="notice-title">{{ title }}</div>
        <div class="notice-desc" v-html="desc"></div>
        <div class="notice-date">{{ date }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// --- utils ---
import { iscode } from "@/utils";
// --- api ---
import { noticeRecordApi } from "@/api";

export default {
  name: "NoticeItem",
  data() {
    return {
      // notice data
      noticeList: [],
      // current notice id
      currentID: this.$route.query.id,
    };
  },
  computed: {
    title() {
      for (let i = 0; i < this.noticeList.length; i++) {
        if (this.noticeList[i].id === this.currentID - 0) {
          return this.noticeList[i].title;
        }
      }
    },
    desc() {
      for (let i = 0; i < this.noticeList.length; i++) {
        if (this.noticeList[i].id === this.currentID - 0) {
          return this.noticeList[i].content;
        }
      }
    },
    date() {
      for (let i = 0; i < this.noticeList.length; i++) {
        if (this.noticeList[i].id === this.currentID - 0) {
          return this.noticeList[i].start_time;
        }
      }
    },
  },
  methods: {
    // ------ async ------
    // 获取公告历史列表
    async noticeRecord() {
      let res = await noticeRecordApi({
        page: 1,
        pagesize: 99999,
      });
      if (iscode(res)) {
        this.noticeList = res.result.list;
      }
    },

    // ------ goto ------
    // router: go back
    goBack() {
      history.back();
    },
  },
  created() {
    this.noticeRecord();
  },
};
</script>

<style lang="less" scoped>
.notice-item {
  overflow: auto;
  min-height: 900px;

  // center wrapper
  .center-wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }

  // back part
  .back-part {
    width: 100%;
    padding-top: 20px;

    .back-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // notice part
  .notice-part {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 242px;

    .notice-title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 22px;
      text-align: center;
    }

    .notice-desc {
      min-height: 480px;
      height: auto;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 24px;
      margin-top: 40px;
      // overflow: auto;
    }

    .notice-date {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 14px;
      text-align: right;
      margin-top: 80px;
    }
  }
}

@media screen and (max-width: 768px) {
  .notice-item {
    min-height: fit-content;

    .back-part {
      display: none;
    }

    .center-wrapper {
      position: relative;
      width: 100%;
    }

    .notice-part {
      margin-top: 50px;
      margin-bottom: 100px;

      .notice-title {
        font-size: 32px;
        line-height: 42px;
      }

      .notice-desc {
        height: auto;
        font-size: 26px;
        line-height: 38px;
        margin-top: 50px;
        padding: 0 30px;
      }

      .notice-date {
        font-size: 28px;
        line-height: 28px;
        margin: 80px 0 70px 0;
        padding: 0 30px;
      }
    }
  }
}
</style>
